<!-- Json数据预览的弹窗 -->
<template>
    <a-modal v-model:open="data.open" width="800px" centered title="历史操作记录" @cancel="handleCancel"
        wrap-class-name="custom-modal-wrap history">

        <div class="history-wrap">
            <a-table :columns="data.columns" :loading="data.loading" :bordered="true" :data-source="data.historyList"
                size="small" :pagination="false" />
        </div>

        <template #footer>
            <a-button @click="handleClearHistory" type="primary" danger
                :disabled="data.historyList.length === 0">清空</a-button>
            <a-button @click="handleCancel">关闭</a-button>
        </template>

    </a-modal>
</template>

<script setup>
import { reactive, defineExpose, createVNode } from 'vue'
import { revoke } from '../../common/util/revoke.js';
import { cloneObject } from '../../common/util/util.js';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal, message } from 'ant-design-vue';

const data = reactive({
    open: false,
    columns: [
        { title: '操作', dataIndex: 'type' },
        { title: '时间', dataIndex: 'time', width: '260px', align: 'center' },
    ],
    loading: true,
    historyList: []
})

/**
 * @method
 * @desc 显示
 */
const show = () => {
    data.open = true;
    loadData();
}


/**
 * @desc 加载历史记录数据
 */
const loadData = () => {
    data.loading = true;
    data.historyList = cloneObject(revoke.historyList.value).reverse()
    setTimeout(() => {
        data.loading = false;
    }, 300);
}


/**
 * 清空历史记录
 */
const handleClearHistory = () => {
    Modal.confirm({
        title: '确定要清空历史记录吗?',
        icon: createVNode(ExclamationCircleOutlined),
        cancelText: "取消",
        okText: "确认",
        content: createVNode('div', { style: 'color:red;font-size:12px' }, '此操作将不可撤销'),
        onOk() {
            revoke.clearHistory(() => {
                loadData();
                message.success(`清空历史记录成功`);
            })
        },
        onCancel() {
        },
    });
}

// 暴露函数
defineExpose({
    show
})

/**
 * @method
 * @desc 关闭弹窗时的回调
 */
const handleCancel = () => {
    data.open = false;
    data.loading = true;
}

</script>

<style lang="less" scoped>
.history-wrap {
    padding: 10px;
    min-height: 400px;
}
</style>